<!DOCTYPE html>
<html lang="en">
  <head>
    <th:block th:include="include :: header('Pear Admin 开发平台')" />
  </head>
  <body>
    <style>
      .demo-login-container {
        width: 320px;
        margin: 150px auto;
      }
      .demo-login-other .layui-icon {
        position: relative;
        display: inline-block;
        margin: 0 2px;
        top: 2px;
        font-size: 26px;
      }
    </style>
    <form method="post" action="/login" class="layui-form">
      <div class="demo-login-container">
        <div class="layui-form-item">
          <div class="layui-input-wrap">
            <div class="layui-input-prefix">
              <i class="layui-icon layui-icon-username"></i>
            </div>
            <input
              type="text"
              th:name="${un}"
              value=""
              lay-verify="required"
              placeholder="用户名"
              lay-reqtext="请填写用户名"
              autocomplete="off"
              class="layui-input"
              lay-affix="clear"
            />
          </div>
        </div>
        <div class="layui-form-item">
          <div class="layui-input-wrap">
            <div class="layui-input-prefix">
              <i class="layui-icon layui-icon-password"></i>
            </div>
            <input
              type="password"
              th:name="${pwd}"
              value=""
              lay-verify="password"
              placeholder="密   码"
              lay-reqtext="请填写密码"
              autocomplete="off"
              class="layui-input"
              lay-affix="eye"
            />
          </div>
        </div>
        <div th:if="${captchaEnabled}" class="layui-form-item">
          <div class="layui-row">
            <div class="layui-col-xs7">
              <div class="layui-input-wrap">
                <div class="layui-input-prefix">
                  <i class="layui-icon layui-icon-vercode"></i>
                </div>
                <input
                  type="text"
                  th:name="${captcha}"
                  value=""
                  lay-verify="required"
                  placeholder="验证码"
                  lay-reqtext="请填写验证码"
                  autocomplete="off"
                  class="layui-input"
                  lay-affix="clear"
                />
              </div>
            </div>
            <div class="layui-col-xs5">
              <div style="margin-left: 10px; width: 120px; height: 40px">
                <img
                  style="width: 120px; height: 40px"
                  src="/captchaImage/direct"
                  onclick="this.src='/captchaImage/direct?t='+ new Date().getTime();"
                />
              </div>
            </div>
          </div>
        </div>

        <div th:if="${rm}" class="layui-form-item">
          <input
            type="checkbox"
            th:name="${remember}"
            lay-skin="primary"
            title="记住密码"
          />
        </div>
        <div class="layui-form-item">
          <button
            class="layui-btn layui-btn-fluid"
            lay-submit
            lay-filter="demo-login"
          >
            登录
          </button>
        </div>
      </div>
    </form>

    <!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
    <th:block th:include="include :: footer" />
    <script>
      layui.use(function () {
        var form = layui.form;
        var layer = layui.layer;
        var $ = layui.jquery;
        // 提交事件
        form.verify({
          username: function (value, item) {
            if (!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)) {
              return "用户名不能有特殊字符";
            }
            if (/(^_)|(__)|(_+$)/.test(value))
              return "用户名首尾不能出现 _ 下划线";
            if (/^\d+$/.test(value)) return "用户名不能全为数字";

            // 若不想自动弹出默认提示框，可返回 true，这时你可以通过其他提示方式替代（v2.5.7 新增）
            if (value === "xxx") {
              alert("用户名不能为敏感词");
              return true;
            }
          },
          // 数组写法。
          // 数组中两个成员值分别代表：[正则表达式、正则匹配不符时的提示文字]
          password: [/^[\S]{6,12}$/, "密码必须为6到12位的非空字符"],
        });
        form.on("submit(demo-login)", function (data) {
          var field = data.field; // 获取表单字段值
          console.log(field);
          console.log(field.toString());
          console.log(JSON.stringify(field));
          //默认是contentType 默认值: "application/x-www-form-urlencoded"。发送信息至服务器时内容编码类型。
          //默认是contentType "application/json"。发送信息至服务器时内容编码类型。
          $.ajax({
            url: "/login",
            data: field,
            type: "post",
            dataType: "json",
            success: function (result) {
              if (result.code == "0") {
                layer.msg(
                  result.msg,
                  {
                    icon: 1,
                    time: 1000,
                  },
                  function () {
                    location.href = "/index";
                  }
                );
              } else {
                layer.msg(
                  result.msg,
                  {
                    icon: 3,
                    time: 3000,
                  },
                  function () {
                    document.getElementById("captchaImage").src =
                      captchaPath + "?" + Math.random();
                  }
                );
              }
            },
          });
          return false; // 阻止默认 form 跳转
        });
      });
    </script>
  </body>
</html>
